<template>
	<view>
		<!-- 步骤条 -->
		<view class="step">
			<uni-steps :options="option" :active="0" active-color="#00C6C2"></uni-steps>
		</view>

		<!-- 门店认证 -->
		<view class="inforPull">
			<view style="border-bottom: 10rpx solid #F1F1F1;">
				<view class="message">
					<view class="name">经营品类</view>
					<view class="Input">
						<input type="text" placeholder="选择提供的服务项目" v-model="form.name">
					</view>
					<u-icon name="arrow-right" size="22"></u-icon>
				</view>

				<view class="message">
					<view class="name">店铺名称</view>
					<view class="Input">
						<input type="text" placeholder="需与门脸牌匾一致" v-model="form.id_card">
					</view>
				</view>
			</view>
			<view style="border-bottom: 10rpx solid #F1F1F1;">
				<view class="message">
					<view class="name">经营地址</view>
					<view class="Input">
						<view class="addrs" @click="addre">
							{{address}}
						</view>
						
						<!-- <input type="text" placeholder="标记店铺地址" v-model="form.email"> -->
					</view>
					<u-icon name="arrow-right" size="22"></u-icon>
				</view>
				<view class="message">
					<view class="name">门牌号码</view>
					<view class="Input">
						<input type="text" placeholder="详细地址 例：6楼613号" v-model="form.phone">
					</view>
				</view>
				<view class="message">
					<view class="name">省市编号</view>
					<view class="Input">
						<input type="text" placeholder="详细地址 例:11000" v-model="form.phone">
					</view>
					<u-icon name="arrow-right" size="22"></u-icon>
				</view>
				<view class="message">
					<view class="name">门店电话</view>
					<view class="Input">
						<input type="text" placeholder="门店的固话或移动电话" v-model="form.phone">
					</view>
				</view>
			</view>
			<view style="background-color: #FFFFFF;padding:0 20rpx;border-bottom: 1rpx solid #F1F1F1;">
				<view style="padding:30rpx 0;">门店图片</view>
				<view class="banner-cen">
					<view style="width: 20%;font-size: 28rpx;">门店图片</view>
					<view class="banner-right">
						<view class="right-top-text">
							<text>需拍出完整门框、内部环境、前台</text>
							<text style="color: #00c6c2;margin-left: 30rpx;">示例图</text>
						</view>
						<view class="tu">
							<view class="banner-tu">
								<u-upload :action="action" :file-list="fileList" :max-size="1 * 1024 * 1024" max-count="3"></u-upload>
								<text style="font-size: 24rpx;padding: 5rpx 0;">门头照</text>
							</view>
						
						</view>
					</view>
				</view>
			</view>
			<view class="bu-c">
				<view style="color: #333333;font-size: 26rpx;width: 25%">补充信息</view>
				<view style="width: 65%;">
					<u-upload :action="action" :file-list="fileList" :max-size="1 * 1024 * 1024" max-count="1"></u-upload>
				</view>
				<view  style="font-size: 22rpx;color: #00c6c2;width: 10%;">选填</view>
			</view>
		</view>
		<view class="veri-2">
			<view class="custom-style">下一步</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: '',
				fileList: [],
				option: [{
					title: '身份认证'
				}, {
					title: '职业认证'
				}, {
					title: '合作协议'
				}, {
					title: '结算信息'
				}],
				index: 0,
				form: {
					name: '',
					sex: '',
					id_card: '', //身份证
					email: '',
					phone: '',
					code: '' //验证码

				},
				address:'标记店铺地址'
			}
		},
		methods: {
			change(e) {
				console.log(e)
			},
			//选择地址
			addre(){
				let that = this
				// this.address=''
				uni.chooseLocation({
				    success: function (res) {
				        console.log('位置名称：' , res.name);
				        console.log('详细地址：' ,res.address);
				        console.log('纬度：' , res.latitude);
				        console.log('经度：' ,res.longitude);
						that.address=''
						that.address = res.name
				    }
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #F3F3F3;
	}
</style>
<style scoped lang="less">
	//步骤
	.custom-style{
		color: #fff;
		background-color: #00c6c2;
		width: 90%;
		text-align: center;
		line-height:90rpx;
		margin: 30rpx auto;
	}
	.bu-c{
		padding: 20rpx;
		display: flex;
		
		justify-content: space-between;
	}
	.banner-cen {
		display: flex;

		.banner-right {
			width: 75%;
			margin-left: 25rpx;

			.right-top-text {
				font-size: 26rpx;
				color: #C0C0C0;
				text-align: center;
			}

			.tu {
				padding: 20rpx;
				display: flex;
				align-items: center;


				.banner-tu {

					padding: 0 10rpx;
					text-align: center;


					.slot-btn {
						width: 120rpx;
						height: 120rpx;
						border: 1px dashed #ccc;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.u-list-item.data-v-0d33af60 {
						width: 65rpx;
						height: 120rpx;
						overflow: hidden;

						background: #f4f5f6;
						position: relative;
						border-radius: 10rpx;
						display: inline-flex;
						align-items: center;
						justify-content: center;
					}


				}
			}

		}
	}

	.step {
		padding: 47rpx 25rpx;
		background-color: white;
		margin-bottom: 14rpx;
	}


	//信息填写
	.inforPull {
		// 
		background: white;

		.message {
			// width: 100%;
			padding: 31rpx 26rpx;
			border-bottom: 1rpx solid #E2E2E2;
			display: flex;
			align-items: center;
			.name {
				width: 160rpx;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #282828;
			}

			.Input {
			
				flex: auto;

				input {

					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #979797;
				}
				.addrs{
					
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #979797;
				}
			}

		}

	}
</style>
